<template>
    <div class="page-container">
      <div class="title">
        <p class="title_home">陕西省水利专家管理平台</p>
        <img class="img" src="../../assets/u374.png" />
      </div>
  
      <img src="../../assets/routerBGact.svg" class="actbg" />
      <div class="routerbox">
        <el-row
          :gutter="20"
          type="flex"
          justify="center"
        >
          <el-col :span="5" v-if="role != 'CENTER'">
            <div class="bgr" @click="inter(1)">
              <p class="bgp1-1">专家入库管理</p>
              <!-- <p class="bgp2-1">Supplier</p> -->
              <img src="../../assets/b1.svg" class="imagebg1" />
              <img src="../../assets/b2.svg" class="imagebg2" />
            </div>
          </el-col>
          <el-col :span="5" v-if="projectVisible">
            <div class="bgr" @click="inter(2)">
              <p class="bgp1-2">专家库管理</p>
              <!-- <p class="bgp2-2">Project</p> -->
              <img src="../../assets/b1.svg" class="imagebg1" />
              <img src="../../assets/b2.svg" class="imagebg2" />
            </div>
          </el-col>
          <el-col :span="5" v-if="storageVisible">
            <div class="bgr" @click="inter(3)">
              <p class="bgp1-1">专家出库管理</p>
              <!-- <p class="bgp2-3">Storage</p> -->
              <img src="../../assets/b1.svg" class="imagebg1" />
              <img src="../../assets/b2.svg" class="imagebg2" />
            </div>
          </el-col>
          <el-col :span="5" v-if="reviewVisible">
            <div class="bgr" @click="inter(4)">
              <p class="bgp1-1">专家抽取管理</p>
              <!-- <p class="bgp2-3">Storage</p> -->
              <img src="../../assets/b1.svg" class="imagebg1" />
              <img src="../../assets/b2.svg" class="imagebg2" />
            </div>
          </el-col>
          <el-col :span="5" v-if="reviewVisible">
            <div class="bgr" @click="inter(6)">
              <p class="bgp1-1">项目后评价管理</p>
              <!-- <p class="bgp2-3">Storage</p> -->
              <img src="../../assets/b1.svg" class="imagebg1" />
              <img src="../../assets/b2.svg" class="imagebg2" />
            </div>
          </el-col>
        </el-row>
        <el-row
          :gutter="20"
          type="flex"
          justify="center"
          style="width: 1300px; height: 270px; padding-top: 40px"
        >
        </el-row>
      </div>
      <div class="outload" divide @click="logoutHandle">退出登录</div>
      
        <div class="plat" v-if="plantvisible" @click="inter(5)">平台管理</div>
      
    </div>
  </template>
  
  <script>
  import {logout} from "@/api/user"
  export default {
    data() {
      return {
        shu: false,
        menu: [],
        role:'',
        supplierVisible: true,
        projectVisible: true,
        storageVisible: true,
        reviewVisible: true,
        Lawsvisible: false,
        homevisible: false,
        plantvisible:false,
        name: "",
      };
    },
    created() {
      // this.usrinfo();
      // this.usrnav();
      // Promise.all([this.getUserInfo()]).then(() => {
      //   this.loading = false;
      // });
    },
  
    mounted() {
      this.role = sessionStorage.getItem('role')
      console.log(this.role);
      // if (this.role == 'SYSTEM' || this.role == 'COMMON' ||this.role == 'GJC'  || this.role == 'lEADER' ) {
      //   this.projectVisible = true
      //   this.storageVisible = true
      //   this.reviewVisible = true
      // }

      if (this.role == 'SYSTEM' || this.role == 'COMMON') {
        this.plantvisible = true
        
      }
      //     window.addEventListener('unload', this.logoutHandle);
    },
    beforeDestroy() {
      //     window.removeEventListener('unload', this.logoutHandle);
    },
    methods: {
      async logout(){
        await this.$store.dispatch("user/logout");
        this.$router.push(`/login?redirect=${this.$route.fullPath}`);
      },
      inter(num) {
        if (num == 1) {
          localStorage.setItem("name", "专家入库管理");
          if (this.role != 'DEPT') {
            this.$router.push("/dashboard/count");
          } else {
            this.$router.push("/dashboard/index");
          }
          
        } else if (num == 2) {
          localStorage.setItem("name", "专家库管理");
          this.$router.push("/example/table");
        } else if (num == 3) {
          localStorage.setItem("name", "专家出库管理");
          this.$router.push("/expert-exit/index");
        } else if (num == 4) {
          localStorage.setItem("name", "专家抽取管理");
          this.$router.push("/Review/index");
        } else if (num == 5) {
          localStorage.setItem("name", "平台管理");
          this.$router.push("/platform/index");
        }else if (num == 6) {
          localStorage.setItem("name", "项目后评价管理");
          this.$router.push("/appraise/index");
        }
      },
      increaseFontSize() {
        this.$refs.pText.style.fontSize = "24px"; // 假设原始字体大小为12px
      },
      resetFontSize() {
        this.$refs.pText.style.fontSize = "12px"; // 假设原始字体大小为12px
      },
      // 获取当前管理员信息
      getUserInfo() {
        return this.$http
          .get("/sys/user/info")
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$store.state.user.id = res.data.id;
            this.$store.state.user.name = res.data.username;
            this.$store.state.user.superAdmin = res.data.superAdmin;
          })
          .catch(() => {});
      },
      usrnav() {
        this.$http
          .get("/sys/menu/nav")
          .then((res) => {
            console.log(res.data.data);
            window.SITE_CONFIG["menuList"] = res.data.data;
            // fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList'])
            console.log("nav", window.SITE_CONFIG["menuList"]);
            this.menu = res.data.data;
            console.log(this.menu.length);
            for (var i = 0; i < this.menu.length; i++) {
              if (this.menu[i].url == "Laws/Lawshome") {
                this.Lawsvisible = true;
              } else if (this.menu[i].url == "waterplan/planhome") {
                this.supplierVisible = true;
              } else if (this.menu[i].url == "MajorProjects/Majorhome") {
                this.projectVisible = true;
              } else if (this.menu[i].url == "CaseStudy/Casehome") {
                this.Casevisible = true;
              } else if (this.menu[i].url == "modules/home") {
                this.homevisible = true;
              }
            }
          })
          .catch(() => {
            console.log("err");
          });
      },
      usrinfo() {
        this.$http
          .get("/sys/user/info")
          .then((res) => {
            // window.SITE_CONFIG['menuList'] = res.data;
            // fnAddDynamicMenuRoutes(window.SITE_CONFIG['menuList'])
            // console.log("info",res.data);
            // window.SITE_CONFIG['userinfo'] = res.data.data.roleIdName
  
            this.name = res.data.data.roleIdName[0];
            console.log("name1", this.name);
            if (this.name == "普通用户") {
              this.name = "RegularUser";
            } else if (this.name == "处室领导") {
              this.name = "DepartmentManager";
            } else if (this.name == "水利厅领导及同级其他处室领导") {
              this.name = "Leader";
            } else if (this.name == "水利规划业务操作员") {
              this.name = "waterBusinessOperator";
            } else if (this.name == "重大项目业务操作员") {
              this.name = "majorBusinessOperator";
            } else if (this.name == "专题研究业务操作员") {
              this.name = "caseBusinessOperator";
            } else if (this.name == "系统管理员") {
              this.name = "SystemAdministrator";
            } else if (this.name == "开发者") {
              this.name = "superadmin";
            } else {
              this.name = "superadmin";
            }
            console.log("name2", this.name);
            window.SITE_CONFIG["userpermission"].userinfo.role = this.name;
          })
          .catch((error) => {
            console.error("Error in usrinfo:", error);
          });
      },
      async logoutHandle() {
  try {
    await this.$confirm("确定要退出登录吗?", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    });

    // 如果用户点击了"确认"
    // await this.$store.dispatch('user/logout');
    logout().then((res) => {
      console.log(res);
      if (res.code == 200) {
        this.$message.success('成功退出！')
        sessionStorage.removeItem('token')
    this.$router.replace(`/login`);
      }
    })
    // 跳转到登录页，并携带当前路径作为 redirect 参数
    // this.$router.replace(`/login?redirect=${this.$route.fullPath}`);

  } catch (error) {
    // 用户点击取消或登出失败
    console.log("取消退出或登出失败", error);
  }
}
    },
  };
  </script>
  
  <style scoped>
  .outload {
    position: absolute;
    display: flex;
    top: 8%;
    left: 85%;
    width: 6%;
    height: 4%;
    border-radius: 4px;
    border: 2px solid #39bbfd;
    box-shadow: 0 0 10px 5px rgba(52, 152, 219, 0.5);
    color: #39bbfd;
    font-size: 16px;
    text-align: center;
    justify-content: center;
    align-items: center;
    letter-spacing: 4px;
    z-index: 10;
  }
  .outload:hover{
    cursor: pointer;
  }
  .plat {
    position: absolute;
    display: flex;
    top: 88%;
    left: 85%;
    width: 6%;
    height: 4%;
    border-radius: 4px;
    border: 2px solid #39bbfd;
    box-shadow: 0 0 10px 5px rgba(52, 152, 219, 0.5);
    color: #39bbfd;
    font-size: 16px;
    text-align: center;
    justify-content: center;
    align-items: center;
    letter-spacing: 4px;
    cursor: pointer;
    z-index: 10;
  }
  .box-card {
    margin: 10px;
    align-items: center; /* 内容垂直居中 */
    background-color: #fff;
  }
  
  .col1 {
    margin: 20px;
    width: 20%;
    height: 40%;
    display: flex;
    flex-direction: column; /* 列布局，将内容垂直排列 */
    align-items: center; /* 内容垂直居中 */
  }
  
  .row {
    top: 50px;
    width: 80%;
    left: 24%;
    margin: 10px;
    flex-direction: column; /* 列布局，将内容垂直排列 */
    align-items: center; /* 内容垂直居中 */
    justify-content: center;
  }
  
  .image {
    width: 50%;
    border-radius: 5%;
    display: block;
  }
  
  .bgr {
    position: relative;
    width: 186px;
    height: 250px;
    /* background:url(../../assets/one.png) no-repeat; */
    transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
  }
  .imagebg1,
  .imagebg2 {
    position: absolute;
    width: 100%;
    top: 20%;
    left: 0;
  }
  .imagebg2 {
    position: absolute;
    width: 90%;
    top: 25%;
    left: 5%;
  }
  .imagebg1 {
    z-index: 1; /* 图片1在上层 */
  }
  .imagebg1:hover {
    position: absolute;
    width: 100%;
    top: 15%;
    left: 0;
    transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
  }
  .imagebg2:hover {
    position: absolute;
    width: 80%;
    top: 25%;
    left: 18px;
    z-index: 0; /* 图片2在下层 */
    transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
  }
  .routerbox {
    position: absolute;
    top: 30%;
    left: 13.5%;
    width: 80%;
    height: 40%;
  }
  
  .page-container {
    /* background: url("/routerBG.jpg");
          background-size: 100vw 100vh;
          background-position: center;
          height:1080px;
          width: 1920px; */
  
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center; /* 内容垂直居中 */
    background-image: url('../../assets/routerbg.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  
  .actbg {
    /* background: url("/routerBGact.svg"); */
    /* background-size: cover;
          background-position: center;
          height: 1000px; */
    position: absolute;
    left: 30%;
    background-size: cover;
    background-position: center;
    height: 100%;
    width: 40%;
    opacity: 0.3;
  }
  .title {
    border-width: 0px;
    position: absolute;
  
    top: 0%;
    width: 100%;
    height: 15%;
  
    line-height: 0px;
    text-align: center; /* 文本居中 */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .title img {
    border-width: 0px;
    position: relative;
    left: 0px;
    top: -20px;
    width: 100%;
    height: 80%;
  
    z-index: 1;
  }
  
  .title_home {
    position: absolute;
    font-size: 2vw;
    top: 7%;
    left: 50%;
    transform: translate(-50%, -50%); /* 将文本居中 */
    color: rgb(255, 255, 255);
    font-weight: bolder;
    z-index: 2;
  }
  .title_text {
    position: absolute;
    top: 26%;
    left: 38%;
    width: 20%;
    line-height: 28px;
    font-size: 24px;
    color: rgb(255, 255, 255);
    z-index: 0;
  }
  /*     position: relative;
      width: 186px;
      height: 250px; */
      .bgr:hover {
  position: relative;
  cursor: pointer;
  width: 206px;
  height: 270px;
  font-size: 28px;
  left: -2.5%;
}

.bgp1-1 {
  position: absolute;
  top: 85%;
  font-size: 1vw;
  width: 100%;
  text-align: center;
  /* text-decoration: none; */
  color: #fff;
  font-weight: bolder;
  transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.bgp1-2 {
  position: absolute;
  top: 85%;
  font-size: 1vw;
  width: 100%;
  text-align: center;
  /* text-decoration: none; */
  color: #fff;
  font-weight: bolder;
  transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.bgp1-3 {
  position: absolute;
  top: 100%;
  font-size: 1vw;
  left: 10%;
  text-decoration: none;
  color: #fff;
  font-weight: bolder;
  transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.bgp2-1 {
  position: absolute;
  top: 90%;
  font-size: 1vw;
  left: 10%;
  text-decoration: none;
  color: rgb(210, 210, 210);
  transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.bgp2-2 {
  position: absolute;
  top: 90%;
  font-size: 1vw;
  left: 10%;
  text-decoration: none;
  color: rgb(210, 210, 210);
  transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.bgp2-3 {
  position: absolute;
  top: 90%;
  font-size: 1vw;
  left: 10%;
  text-decoration: none;
  color: rgb(210, 210, 210);
  transition: font-size 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.bgr:hover .bgp1-1 {
  font-size: 1.1vw;
  top: 85%;
}

.bgr:hover .bgp2-1 {
  font-size: 1.1vw;
  top: 85%;
}

.bgr:hover .bgp1-2 {
  font-size: 1.1vw;
  top: 85%;
}
.bgr:hover .bgp2-2 {
  font-size: 1.1vw;
  top: 85%;
}

.bgr:hover .bgp1-3 {
  font-size: 1.1vw;
  top: 95%;
}

.bgr:hover .bgp2-3 {
  font-size: 1.1vw;
  top: 85%;
}
  </style>
  